/**
 * <section class="timeLineHolder"> <div class="timeLine"> <span
 * class="timeLineBar">Year</span> </div>
 */

.timeLineHolder {
  z-index          : 10000;
  position         : fixed;
  right            : 0;
  bottom           : 5px;
  left             : 0;
  width            : 50%;
  max-width        : 700px;
  height           : 40px;
  margin           : 0 auto;
  border-radius    : 5px;
  background-color : rgba(0, 0, 0, .5);
}

.timeLine {
  width            : 100%;
  height           : 40px;
  border-radius    : 5px;
  background-color : #757575;
}

.timeLine .timeLineBar {
  width              : calc(100% - 60px);
  height             : 40px;
  float              : left;
  color              : white;
  border-radius      : 5px;
  background-color   : #f66c5c;
  text-align         : center;
  line-height        : 40px;
  -moz-transition    : all 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -o-transition      : all 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -webkit-transition : all 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  transition         : all 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  /* margin: 0 auto; */
}

.timeLineStart {
  position            : absolute;
  right               : 0;
  width               : 30px;
  height              : 30px;
  float               : left;
  margin              : 5px 10px;
  background-image    : url("../images/play.svg");
  background-repeat   : no-repeat;
  background-position : center;
  cursor              : pointer;
  /* text-align: center; line-height: 40px; */
}

.sideIndex {
  position           : fixed;
  top                : 10px;
  right              : -250px;
  bottom             : 0;
  width              : 250px;
  height             : 100%;
  max-height         : 500px;
  color              : white;
  border-radius      : 5px;
  background-color   : #727272;
  text-align         : center;
  -moz-transition    : right 200ms cubic-bezier(0.585, 0.080, 0.560, 0.760);
  -o-transition      : right 200ms cubic-bezier(0.585, 0.080, 0.560, 0.760);
  -webkit-transition : right 200ms cubic-bezier(0.585, 0.080, 0.560, 0.760);
  transition         : right 200ms cubic-bezier(0.585, 0.080, 0.560, 0.760);
}

.sideIndex h1 {
  padding : 10px;
  color   : white;
}

.sideIndexButton {
  position         : relative;
  top              : calc(50% - 50px);
  left             : -55px;
  width            : 50px;
  height           : 50px;
  border-radius    : 5px;
  background-color : #F5D162;
  text-align       : center;
  font-size        : 35px;
  line-height      : 50px;
}

.infocenter {
  margin : 10px;
}

.active {
  right : 10px;
}

#timerOptions {
  z-index        : 10;
  display        : flex;
  /* position       : fixed; */
  right          : 0;
  bottom         : 1rem;
  left           : 0;
  width          : 100%;
  height         : 5rem;
  margin         : 0 auto;
  padding        : .5rem 1rem;
  border-radius  : 5px;
  background     : rgba(0, 0, 0, .75);
  align-items    : center;
  flex-direction : column;
}
/* 627AF5 */
#timerOptions p {
  position      : relative;
  width         : 100%;
  height        : 1rem;
  margin        : 0;
  margin-bottom : .5rem;
  color         : white;
  text-align    : center;
  font-weight   : bold;
}

#timerOptions button {
  position   : relative;
  width      : 1.5rem;
  height     : 1.5rem;
  margin     : 0;
  margin-top : .5rem;
  color      : white;
  border     : none;
}

#timerOptions button span {
  position    : absolute;
  top         : 50%;
  right       : 0;
  left        : 0;
  width       : 100%;
  margin      : 0 auto;
  text-align  : center;
  line-height : 0;
  transition  : transform .3s ease;
}

#timerOptions > div {
  position      : relative;
  top           : 0;
  bottom        : 0;
  width         : 100%;
  height        : .3rem;
  margin        : auto 0;
  border-radius : 100px;
  background    : white;
}

#timerOptions > div span {
  position      : absolute;
  top           : 0;
  bottom        : 0;
  width         : 1rem;
  height        : 1rem;
  margin        : auto 0;
  border-radius : 100%;
  background    : #627AF5;
  transition    : left .075s cubic-bezier(.7,1.39,.7,1.4);
}

#timerOptions button.playing span:first-of-type,
#timerOptions button span:last-of-type {
  /* display: none; */
  transform : scale(0);
}

#timerOptions button.playing span:last-of-type {
  /* display: initial; */
  transform : scale(1);
}
